

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery范围选择插件RangeSlider</title>

<link rel="stylesheet" href="css/normalize.min.css" />
<link rel="stylesheet" href="css/ion.rangeSlider.css" />
<link rel="stylesheet" href="css/ion.rangeSlider.skinNice.css" />



</head>

<body>



<div style="position:relative; padding:200px;width:250px;margin:0 auto;">

	<div id="range_1" ></div>

	<br/><br/><br/>

	<center>

		<!-- <select id="selectStyle">

			<option value="css/ion.rangeSlider.skinFlat.css">样式一（扁平化）</option>

			<option value="css/ion.rangeSlider.skinNice.css">样式二（白色）</option>

			<option value="css/ion.rangeSlider.skinSimple.css">样式三（默认）</option>

		</select> -->

	</center>

</div>



<!-- All JS --> 

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript" src="js/ion.rangeSlider.js"></script> 

<script type="text/javascript">


	$("#range_1").ionRangeSlider({
		min: 0,
		max: 24,
		from:0,
		to: 24,
		type: 'single',//设置类型,为单向
		step: 1,
		prefix: "",//设置数值前缀
		postfix: "时",//设置数值后缀
		prettify: true,
		hasGrid: true,
		slide:test,
		onChange:test,
		onFinish:test1
		
	})
	
	function test(event){
		var hour=event.fromNumber;
		//console.log(hour);
	}
	function test1(event){
		var hour=event.fromNumber;
		console.log(hour);
	}
	




</script>



</body>

</html>

